<!DOCTYPE html>
{include file='head_hooks.html'}

<head>
  <title>Action Edit | Protoweb</title>

  {include file='head_scripts.html'}

  <!-- CodeMirror styles -->
  <link rel="stylesheet" href="assets/js/libs/codemirror/codemirror.css">
  <link rel="stylesheet" href="assets/js/libs/codemirror/theme/monokai.css">

  <style>
    #editor {
      display: none;
    }
    .CodeMirror {
      line-height: 1.3em;
    }

    .CodeMirror-fullscreen {
      display: block;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
    }    
  </style>

</head>

<body>

  {include file='body_hooks.html'}

  {include file='navbar.html'}

  <div class="container-fluid">

    {include file='messages.html'}

    <textarea id="editor"></textarea>
  </div>
  <!-- editor-container -->

  {include file='footer_scripts.html'}

  <!-- CodeMirror -->  
  <script src="assets/js/libs/codemirror/codemirror.js"></script>
  <script src="assets/js/libs/codemirror/mode/xml/xml.js"></script>
  <script src="assets/js/libs/codemirror/mode/javascript/javascript.js"></script>
  <script src="assets/js/libs/codemirror/mode/css/css.js"></script>
  <script src="assets/js/libs/codemirror/mode/clike/clike.js"></script>
  <script src="assets/js/libs/codemirror/mode/php/php.js"></script>

  <script>
    var myCodeMirror;

    function loadAction() {
      jQuery.ajax({
        type: 'POST',
        url: '{$loadUrl}',
        success: showCode,
        dataType: 'text'
      });
    }

    function saveAction() {
      jQuery.post(
        '{$saveUrl}',
        {literal}
        {content: myCodeMirror.getValue()}
        {/literal}
      );
    }

    function showCode(data) {
      myCodeMirror.setValue(data);
      myCodeMirror.setCursor({$startLine});
      myCodeMirror.refresh();
    }

    jQuery(document).ready(function() {

      jQuery('#save-action').on('click', function() {
        event.preventDefault();

        saveAction();
      });

      myCodeMirror = CodeMirror.fromTextArea(document.getElementById("editor"), {
        lineNumbers     : true,
        matchBrackets   : true,
        indentUnit      : 4,
        indentWithTabs  : false,
        mode            : "application/x-httpd-php",
        theme           : "monokai",
        autofocus       : true,
        extraKeys       : { 
          "Ctrl-S": function(instance) { saveAction(); }
        }
      });

      CodeMirror.connect(window, "resize", function() {
        setFullScreen(myCodeMirror);
      });

      function winHeight() {
        return window.innerHeight || (document.documentElement || document.body).clientHeight;
      }

      function setFullScreen(cm) {
        var wrap = cm.getWrapperElement(), scroll = cm.getScrollerElement();
        wrap.className += " CodeMirror-fullscreen";
        scroll.style.height = (winHeight() - $(".navbar-fixed-top").height()) + "px";
        document.documentElement.style.overflow = "hidden";
        cm.refresh();
      }

      setFullScreen(myCodeMirror);

      loadAction();
    });
  </script>
</body>

</html>
